Debe haber mil formas de hacerlo, y cualquiera de ellas es buena siempre que la entrada no se haga interminable cosa que a veces me ha ocurrido
En BLOGGER ACCESORIES nos muestran una original caja contenedora o mejor dicho la posibilidad de resaltar una parte de nuestra entrada.
El autor Mohamed Rias muestra algunos códigos y textos de esta forma:
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
Una vez añadido guardamos los cambios y nos dirigimos al editor de entradas, allí añadimos:margin : 15px 35px 15px 15px;
padding : 10px;
background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
<div class="codeview">
</div>
¿La personalizamos?
En background : #f9f9f9 tenemos la posibilidad de variar el color de fondo.
La imagen que aporta el autor la sustituimos en:
url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif)
Hay que aclarar que la imagen está añadida a un fondo blanco de forma rectangular, la imagen que deseamos añadir debe ser más o menos así:
130 x 91
Con padding : 10px; bajamos o subimos la imagen que nosotros añadimos.
Una referencia para los bordes:
border-top : 1px solid #eeeeee; (borde superior)
border-right : 2px solid #cccccc; (borde derecho)
border-bottom : 2px solid #cccccc; (borde izquierdo)
border-left : 1px solid #eeeeee; (borde inferior)
La imagen que aporta el autor la sustituimos en:
url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif)
Hay que aclarar que la imagen está añadida a un fondo blanco de forma rectangular, la imagen que deseamos añadir debe ser más o menos así:
130 x 91Una referencia para los bordes:
border-top : 1px solid #eeeeee; (borde superior)
border-right : 2px solid #cccccc; (borde derecho)
border-bottom : 2px solid #cccccc; (borde izquierdo)
border-left : 1px solid #eeeeee; (borde inferior)
Y eso es todo ya pueden empezar cuando gusten.
Seguimos con la telepatía, jajajaja, precisamente estaba haciendo una, cuando me voy a ver mi reader y ahi esta....jajajaja...gracias madrina, me lo llevooooooooooo....
Salu2
un apunte, he tenido que ponerlo en la seccion de post en el css, sino no me funcionaba ☺☺☺....
Pues si, una buena opción de mostrar html. Me la anoto.
SALU2
Esta bien la idea, alomejor la uso..
Un saludo
Por lo visto a ti te ha sentado bien esta nueva idea Gem@, gracias por el dato, un saludo.
Ojalá tengas tiempo para pasar a dejar un comentario en MundoSoviet.
Pizcos explícame o de la sección de post :(
Me alegra que te guste kyle xy :)
Carluso todo tuyo ;)
Soviet en mi opinión está bien para resaltar algo, pero respecto a utilidad prefiero la que uso normalmente con barra de scroll.
Voy a verte ya mismo y no, no me olvido de el tema pendiente ;)
Allá voy! Me han gustado mucho los ejemplos :D
Vane apuesto que la lechuza estará presente en tu ejemplo ¿o será la mercería Cabrera?
ufff, que interesante Gem@,
pero una vez más, machaconamente, te pregunto, cuando dices colocar antes del "skin",
si se tienen colocados ahí mismo otros complementos como por ejemplo parte del "leer más", etc, ¿en donde se coloca el nuevo código, por encima de los antes añadidos o inmediatamente antes del "skin"
haya añadido lo que haya añadido antes para que otras cosas funcionen???.
Me he fijado y nadie más te lo pregunta, pero a nosotros, ya te lo dije, siguiendo todas las instrucciones paso a paso, no nos funciona así que algo o mucho estamos haciendo mal.
Nos pasa solo y siempre con todo lo que debe ir en esa parte, ya te digo.
Ya verás como este mensaje sí se lee... y gracias una vez más.
Hola Susy tu pregunta me ha gustado porque tiene su explicación que a lo mejor muchos desconocen y es muy simple la respuesta.
Normalmente los que damos explicaciones para trabajar la plantilla siempre decimos "añadir justo antes de ]]>:<b:skin> tal o cual línea de código" y decimos precisamente ese lugar porque es justo donde termina la CSS de la plantilla.
La CSS o el CSS son las hojas de estilo el lugar donde definimos los estilos de toda la plantilla, color, medidas, márgenes, bordes, ancho, alto y un largo ect...
Como te decía las hojas de estilo empiezan en <head> y termina en ]]>:<b:skin> indicamos ese lugar para localizarlo fácilmente y sobre todo para no añadirlo dentro de algún estilo de la plantilla.
Da lo mismo si lo añades antes de #footer { por ejemplo siempre y cuando lo hagas respetando el cierre del estilo (que termina en }
Da igual si tienes añadido el código de leer más o expandir entradas, puedes añadirlo en el orden que tu quieras antes o después de cualquier estilo pero siempre debe quedar antes de ]]>:<b:skin>
Este código es sencillo, sólo utiliza css y la parte de la entrada, mira si añadiste correctamente el texto de la entrada:
<div class="codeview">
contenido de la caja.
</div>
;)
Hola gem@, disculpa que escriba aquí que no tiene nada que ver, pero ya me olvidé donde estaba el hilo de comentarios sobre las imagenes que me tenían a mal traer (me tienen).
Es el problema de usar el nuevo editor, no se puede hacer seguimiento de comentarios, pero este me gusta mas...
Bueno vamos a lo nuestro; lo de la sidebar ya viste, lo solucioné, pero agrandada con eso quice ponerle imagen a los post, la misma, pero mas grande, claro.
Bueno, lo hice, lo puedes ver, pero... si, como siempre un pero, al expandir la entrada o leer mas, la imagen no continúa hacia abajo, se corta donde termina el footer y después, todo blanco!
No se si habrá algún repeat que no me repita también la parte de arriba de la imagen, porque también probé poniendole repeat: o algo así, pero como te digo me repite la imagen desde arriba, no la alarga de abajo, no se si me entiendes, me cuesta explicarlo, sería mas fácil si lo vieras, creo.
Besotes gemit@ y buen Domingo! ;)
Después leer este comentario me he dado cuenta que he cometido un error Susy, las hojas de estilo no terminan en ]]>:<b:skin> sino en </head>
El famoso ]]>:<b:skin> que sólo reconoce Blogger es un añadido para el funcionamiento de la plantilla vaya usted a saber por qué, aún así la explicación sigue siendo la misma ;)
Hola k_nelita el problema es el mismo que la sidebar sólo que con el código leer más, o read more.
Cuando se repite la imagen se repite completa, es decir si una imagen tiene en la parte superior una margarita al repetirse mostrará la margarita repetidamente.
Esto pensando... si se podría hacer lo mismo que con la sidebar, una imagen para el título (con la margarita)y en post una imagen sin ella, es decir una imagen sin el detalle que deseas mostrar de esa forma al expandirse mostraría una imagen uniforme.
¿Qué piensas?
Gracias gem@, lo voy a intentar a ver que pasa, pero en la sidebar no hay dos imagenes, es solo una que se repite en cada bloque y se alarga sola al ponerle mas cosas, así que no se...
Voy a probar con dos imagenes como dices, después te cuento ;)
Hola Gem@, tengo una consulta que es muy sencilla, lo que pasa es que quiero saber como hacer que el blog quede sin nada, vacío, o que solamente sea una pagina en blanco, como en esta pagina, esque lo necesito mucho, porfavor explicame el codigo, o si tienes una plantilla con esa describcion podrias pasarmela,
grasias por tu ayuda,
Gem@ si lo pongo antes del skin, no me funcionaba, lo he cambiado de posicion y sin problemas....
Por cierto lo de skin los navegadores lo interpretan como <style> ....css...</style>
Suerte k_nelita ;)
Bonzu... hace tiempo expliqué como hacerlo pero era en una plantilla clásica de Blogger, más o menos es la misma operación pero lógicamente los códigos son distintos, puedes ver algo aquí
Si no te resulta me lo dices y lo hacemos en una plantilla que no sea clásica ;)
Pizcos es muy raro pero no me extraña nada, imagino que lo tendrás entre <head> y </head> quizás eso sea lo que le ocurre a Susy, se lo comentaré ;)
Gracias.
Gracias Gem@,
vamos a empezar de nuevo con todo lo que nos gusta e interesa y andábamos con zozobras y agotados.
Como siempre no solo me has contestado lo que necesitaba escuetamente, si no que me has ubicado en general con respecto a lo que supone cada apartado en cuestión.
Y bien que lo necesitaba!!!
Un abrazo y ya te contaré.
Susy, no sé si habrás leído a Pizcos, tampoco le funcionaba añadido antes de :skin inténtalo en otro lugar pero que se encuentre entre <head> y </head>
(utiliza el blog de pruebas mejor)
Si ves que no te resulta mándame la plantilla a mi correo y lo solucionamos ;)
Hola, lograr lo que quería no fue dificil, seguí con cuidado la guía y funcionó perfectamente, pero me di cuenta de que no tiene sentido crearme infinidad de blog vacios.
Lo que pasa es que no se como hacer que aparezcan entradas, el blog vacío, sin título, sin comentarios, solamente las entradas.
Se que es mucho pedir, pero se que puedes ayudarme, grasias por tu ayuda, no pense que en ese post estubiera mi respuesta.
Yo SI pude poner la caja, lo que no pude fue añadir codigos html para mostrar.. blogger me marca un error al querer publicar la entrada...
felicidades por tu blog me ha sido de gran ayuda
Pues no, no hubo suerte... bueno, a medias, hice la imagen pero se superpone a la otra, además sale una linea blanca dividiendo cada imagen, le saqué de todo lo que dijera border, pading y que se yo que mas, pero la linea blanca sigue allí.
Eso si, la imagen se despliega hacia abajo como quería, pero parece no tener la misma medida que la otra y no es así, es que se corre a un costado, y en otras partes se centra con respecto a la del título.
Ya no se que mas hacerle, pero tu idea, como de costumbre fue buena!
Seguro que sabes como sacarle la linea blanca si?
Y como alinear las dos imagenes?
Puedes verlo porque lo dejé así, y me das una idea si? Porfi!! ;)
Si usamos el tag < CODE > adecuadamente puede quedar mejor :)
Gracias a tí Gem@ y a Pizcos, que sí lo leí.
Vamos a ponernos en marcha y si la cosa se resiste te mandaría la plantilla dichosa.
jajajaja, estoy floja, floja, con el asunto,
abrazos.
Bonzu hay una plantilla que yo utilizo mucho, es la Simple II y está disponible entre el escaso surtido de plantillas que ofrece Blogger.
La sidebar de esa plantilla viene en la parte inferior, abajo del todo y las entradas ocupan todo el ancho de la plantilla.
Creo que reúne las condiciones que estás buscando.
El título se puede eliminar.
La sidebar si no añades nada se queda diáfana.
Los títulos de las entradas es otra historia, si los eliminas no tendrás archivos y no podrás hacer búsquedas :(
De todas formas quise mostrarte más o menos lo que te digo, no me he entretenido en eliminar títulos para no tener que añadirlos después y opte por añadirles el mismocolor de la plantilla (si pasas el ratón sobre los títulos los verás)
Ejemplo
Cuando la veas avísame que la pueda seguir utilizando para pruebas ;)
Enrique V. los códigos se añaden igual que a cualquier entrada, hay que convertirlos en texto plano de lo contrario lo que vemos es el resultado de esos códigos.
Mira aquí
Lo estuve viendo y probando antes de acostarme k_nelita seguramente es muy sencillo pero no termino de entender.
He pensado en TextoPizcos, él tiene mucho dominio sobre temas de diseño y trabaja muy bien con imágenes además que su blog trata de eso aunque abarca muchos campos más.
Creo que es la persona indicada pata sacarte esta preocupación de encima.
¿Qué me dices?
¿Nos puedes explicar más Quitz? nos interesaría que quedara mejor ;)
!Venga Susy manos a la obra¡
Hola Gem@, antes que nada grasias por responder mi duda pero desafortunadamente lo que me comentas no es lo que busco, seguí tu ideología de "experimentar y aver que pasa" y sabes, funcionó, lo conseguí poco antes de tu respuesta del comentario anterior, pero hasta ahora respondo, publiqué una forma de coseguir el efecto, y pasa a verlo en Crea una videoteca con frames, allí puse la forma de lograrlo y lo expliqué.
Si algún error encuentras dímelo.
Hola Bonzu yo entendí que deseabas "que el blog quede sin nada, vacío, o que solamente sea una pagina en blanco"
Pensaba que era una página donde añadir únicamente entradas, ir posteando normalmente pero en una plantilla diáfana cuyo contenido eran exclusivamente las entradas.
Por eso te comenté que si no añadías títulos raramente obtendrías unos archivos en condiciones, ya que Blogger se rige de forma que si no añadimos un título a las entradas toma como título la primera frase de la entrada para los archivos.A no ser que optemos por escoger la opción de mostrar archivos en Lista o Menú desplegable.
Las entradas y todo cuanto publicamos y una vez damos salida tiene una url, todo lo que está colgado en Internet tiene una url única eso es cierto.
Esa url es completamente válida para crear enlaces, pero ahí está el error (mi error) y por eso mi explicación no era otra que si no tenías archivos difícilmente podrías optar a las búsquedas, pero refiriéndome a las búsquedas internas del blog.
Ahora me doy cuenta que eso no era ningún problema porque el segundo blog (x) lo utilizas únicamente como alojamiento de los vídeos.
Esa era la explicación, un blog donde ir alojando archivos (vídeos) y que desde el blog principal enlazaras esos vídeos.
De todas formas hiciste un buen trabajo y te agradezco los enlaces que añades en la explicación aunque lamentando que la ayuda no fuera la correcta por desconocer la idea que tenías ;)
muy weno
tengo otra duda,como lo haces para colocar
[+/-] , tambien podrias colocarte un Formulario de contacto para no desvirtuar el tema.
yo uzo www.wufoo.com en mi blogg
Hola Erwin con [+/-] ¿te refieres al clicar en las categorías que muestra un resumen ?
Como formulario de contacto tengo el correo electrónico lo encontrarás en la sidebar.
Gracias por responder.
Pucha que soy ciego no veo tu Mail ? ...
jajaja igual
a lo que me referia es que al apreta la imagen de entradas antiguas se ven solo 2 post, pero contraidos, al apretar [+/-] se pueden ver, donde explicaste como hacer eso ?
PD : exelente el Blog
Erwin no estás ciego, es que yo a veces escondo las cosas pensando que los demás van a saber donde encontrarlas (tengo que arreglar eso, pero tengo tantas cosas que arreglar en el blog que me dan ganas de salir corriendo)
A lo que vamos... mi mail está en el desplegable "Para encontrarme"
forevergema(arroba)gmail.com
Lo que buscas está aquí
;) Suerte.
Hola! Me gusto mucho, yo tengo uno en el blog, pero de otra fuente, este lo veo con mas estética... Saludos!
!Hola Antony¡
La verdad queda como más personalizado aunque para añadir códigos sigo prefiriendo el textarea por aquello de acortar espacio ;)
hOLA,gracias por por la caja de anuncios pero tengo un problemita, quiero usarla varias veces pero como le hago para intercambiar la imagen, ahora le puse vendido,, pero aveces sera compra,,, como hago para que tengan varias cajas imagenes diferentes,,
gracias
aqui mi como me quedo
http://rcontrolperu.blogspot.com/2008/07/clasificados-esta-seccin-esta-dedicada.html
Esta caja funciona con CSS los estilos de la caja, tamaño. color, imagen...están incluidos en el CSS de la plantilla y saldrá siempre la misma imagen, si se cambia a otra cambiarán también las anteriores.
Una solución sería incluir esa información y la imagen en la misma entrada enmarcando para que tuviera un fondo diferente. El resultado sería muy similar pero creado con HTML.
Huy gracias por la respuesta aunque no se que hacer,,,,entiendo que el la creación en html de la información incluya tambien la imagen con codigo,, ahora el kit seria como hacer para que encaje justo alli,,,,,ayúdame no sea mala,,
gracias
Mejor dicho, no el tag <code> sino más bien ponerles otra fuente, por ejemplo, Courier New, más adecuada para el código. Es decir, usar una fuente más acorde al código.
Siento no ver este comentario antes Rcontrol Peru, no he podido acceder a tu blog y desconozco si solucionaste el problema :(
Quitz ¿te refieres a la fuente que muestro en los códigos?
hh:)
Muchas Gracias Gem@!
Me ha sido de mucha utilidad y lo he incorparado en mi blog.
Un beso.
yz Me alegra mucho Sharon :D
Hola gema.
Quiero que la caja esta no me ocupe todo el tamaño de la entrada.
Tengo una entrada de 550px, y quiero que esta caja solo ocupe 150px de la entrada, ¿como se puede hacer esto?
Muchas gracias.
yz Anónimo aumenta en el margin para que quede más espacio en los lados, por ejemplo en lugar de margin : 15px 35px 15px 15px; puedes poner margin :15px 155px 15px 155px
hola yo tengo una pregunta yo kiero poner mi codigo de afiliacion en mi blog pero m gustaria hacer el cuadro mas angosto y no se como hacerlos solo se q hay q poner mi codigo entre textarea pero no se como hacer q la cajita se vea mas pekeña..si m ayudas gracias d antemano :$
:: LIA-SAMA no entiendo tu pregunta o no está relacionada con esta entrada, porque aquí no se añade ningún textarea.
A qué cuadro te refieres?
Hola Gema, ya ves, o no aparezco en meses o vengo todos los dias :P
He terminado en esta entrada pero no te encuentro los códigos que te tomé para expandir y contraer texto.
La cuestión es que hago muchas cosas siguiendo las indicaciones, copio pego códigos y con algo de suerte llego a entender muchas, pero en otras me pierdo. Por ejemplo, me he dado cuenta que aplico estilos, bordes de las fotos y blablbla que se ven bien desde la pagina principal, cuando visualizamos tantas entradas en cada página, pero cuando voy a la entrada en concreto el borde no existe, es decir, yo sin saberlo he dado estilos solo a lo que se ve desde home!! me he dado cuenta fijate qué cosas, porque el contraer-extender texto (la letra de las canciones) solo funciona desde la pincipal (me meto en la entrada y no se expande...)
La pregunta sería, a qué codigos corresponde exactamente el hecho de abrir una entrada? a qué instrucción o palabra clave corresponde? lo digo para por ejemplo poner el scrit del expandir-contraer en la parte de los codigos que deba, me parece fundamental porque si no pierdo el texto si accedo a la entrada, podría arreglar lo del borde de las fotos...
Espero haberme explicado bien :D Un besazo y gracias
Olvida lo que te comentaba de que no se me expandía el texto en las entradas individuales... vas a alucinar cuando te diga cómo lo he solucionado! abriendo y cerrando un div vacío antes del codigo del codeview!!!! no me preguntes como he llegado a esa conclusión porque no te lo creerías jajajja
Bueno, pero sigo intrigada de cuales son los codigos correspondientes a la entrada individual, así puedo modificar los marcos de las fotos y demás... :) Besote!
Me echas una manita Gema? :D
:: Hola MAI te he mandado un mail hace un minuto , siento esta demora y la pérdida de tiempo :S
Nada de eso Gema. Recibido :) Un ABRAZO.
:: Gracias guapa :)
Gem@ ¿Que pasa si no le quiero agregar una imagen de fondo? Y soy nueva en esto me cuesta entender.
En donde dice:
Aqui añadimos el contenido de la caja ¿Que va?
:: No pasaría nada simplemente donde dice:
background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;
lo dejamos así:
background-color: #f9f9f9;
y con eso pierde la imagen y solo toma el color.
Donde dice contenido es lo que nosotros añadimos justo dentro del cuadro, ya sea código, imágenes, texto....
Hola Gema, puse este artilugio hoy :P peor no se porque narices no me aparece el borde inferior... por todo lo demás perfecto.
No sé dónde lo has puesto y por eso no puedo verlo :S
Nota: solo los miembros de este blog pueden publicar comentarios.